/**
 * layout.css
 *
 * Layout styles
 */

#page {
    width: [[setting:pagewidth]];
    min-width: [[setting:fixedwidth]];
    margin: 0 auto;
    overflow: visible;
}

#page-content {
    min-width: [[setting:fixedwidth]];
}

#page-content #region-main-box {
    left: [[setting:leftcolpad]];
}

#page-content #region-post-box {
    margin-left: -[[setting:rightcolpad]];
}

#page-content #region-pre {
    width: [[setting:regionwidth]];
    margin-left: 0;
    left: [[setting:col1leftpad]];
    margin-[[setting:col1align]]: -50%;
}

#page-content #region-post {
    width: [[setting:regionwidth]];
    left: [[setting:col2leftpad]];
    margin-[[setting:col2align]]: -50%;
}

#page-content #region-main {
    margin-left: [[setting:regionwidthdouble]];
}

.side-pre-only #page-content #region-post-box {
    margin-left: -[[setting:regionwidth]];
}

.side-pre-only #page-content #region-main {
    margin-left: [[setting:regionwidth]];
}

.side-post-only #page-content #region-post-box {
    margin-left: -[[setting:regionwidth]];
}

.side-post-only #page-content #region-main {
    margin-left: [[setting:regionwidth]];
}

/* Fix for 3-column layout with blocks together left */
.columns-3.block-regions-together.region-post-left #page-content #region-main-box {
    left: 0;
}

.columns-3.block-regions-together.region-post-left #page-content #region-post-box {
    margin-left: 0;
}

.columns-3.block-regions-together.region-post-left #page-content #region-pre {
    left: 0;
}

.columns-3.block-regions-together.region-post-left #page-content #region-post {
    left: [[setting:regionwidth]];
}
/* End 3-col blocks together left */

/* Fix for 3-column layout with blocks together right */
.columns-3.block-regions-together.region-post-right #page-content #region-main {
    margin-left: [[setting:regionwidth]];
    margin-right: [[setting:regionwidth]];
}

.columns-3.block-regions-together.region-post-right #page-content #region-pre {
    left: -[[setting:regionwidth]];
}
/* End 3-col blocks together right */

/* Padding adjustments to make layouts with two adjacent block regions space well */
#region-pre .region-content {
    padding: 1px 10px 10px 0;
}

/* Special case for when fluid layout width 100% is selected */
.layout-fluid-100.region-pre-left #region-pre .region-content,
.layout-fluid-100.region-post-left #region-post .region-content,
.layout-fluid-100.columns-2.region-pre-right #region-pre .region-content {
    padding: 1px 10px 0 10px;
}

/* Adjust left padding for #region-pre */
.columns-3.block-regions-together.region-pre-right #region-pre .region-content,
.columns-2.region-pre-right #region-pre .region-content {
    padding: 1px 0 0 10px;
}

#page-course-view-weeks .section .weekdates {
    margin: 0;
}

/* Adjust right padding for #region-post */
.columns-3.block-regions-separate.region-post-right #region-post .region-content,
.columns-3.block-regions-together.region-post-right #region-post .region-content {
    padding: 1px 0 0 10px;
}

.columns-3.block-regions-separate.region-post-right.layout-fluid-100 #region-post .region-content,
.columns-3.block-regions-together.region-post-right.layout-fluid-100 #region-post .region-content {
    padding: 1px 10px;
}

/* Adjust left padding for #region-post */
.columns-3.block-regions-together.region-post-left #region-post .region-content {
    padding: 1px 10px 0 0;
}

/* Prevent course topic margin from interfering with layout */
.course-content ul.topics li.section:first-child,
.course-content ul.weeks li.section:first-child {
    margin-top: 0;
}

/* Prevent #maincontent from interfering with layout */
#maincontent {
    height: 0;
}

/*
 * Margin, padding, and border around non-100%-width layouts.
 * See HOSSUP-867.
 */

/* Apply margin, padding, and border when screen is desktop-sized */
@media screen and (min-width: 1024px) {

    .layout-fluid-95 #page,
    .layout-fluid-90 #page,
    .layout-fluid-85 #page,
    .layout-fluid-80 #page,
    .layout-fixed #page {
        margin: 1em auto;
        padding: .5em;
        border: 1px solid [[setting:header_back]]; /* This color setting should probably have its own color field in the UI eventually. */
        border-radius: [[setting:headercorner]];
    }

    /* Undo float so footer is treated like a part of #page */
    .layout-fluid-95 #page-footer,
    .layout-fluid-90 #page-footer,
    .layout-fluid-85 #page-footer,
    .layout-fluid-80 #page-footer,
    .layout-fixed #page-footer {
        float: none;
    }

}

/* IE8 doesn't do media queries so we have to target it specifically */
.ie8.layout-fluid-95 #page,
.ie8.layout-fluid-90 #page,
.ie8.layout-fluid-85 #page,
.ie8.layout-fluid-80 #page,
.ie8.layout-fixed #page {
    margin: 1em auto;
    padding: .5em;
    border: 1px solid [[setting:header_back]]; /* This color setting should probably have its own color field in the UI eventually. */
    border-radius: [[setting:headercorner]];
}

/* IE8 undo float so footer is treated like a part of #page */
.ie8.layout-fluid-95 #page-footer,
.ie8.layout-fluid-90 #page-footer,
.ie8.layout-fluid-85 #page-footer,
.ie8.layout-fluid-80 #page-footer,
.ie8.layout-fixed #page-footer {
    float: none;
}

/* Don't apply border-radius when browser size is less than 1000px */
@media screen and (max-width: 1024px) {
    .layout-fluid-95 #page,
    .layout-fluid-90 #page,
    .layout-fluid-85 #page,
    .layout-fluid-80 #page,
    .layout-fixed #page,
    .layout-fluid-95 #page-header,
    .layout-fluid-90 #page-header,
    .layout-fluid-85 #page-header,
    .layout-fluid-80 #page-header,
    .layout-fixed #page-header,
    .layout-fluid-95 #page-footer,
    .layout-fluid-90 #page-footer,
    .layout-fluid-85 #page-footer,
    .layout-fluid-80 #page-footer,
    .layout-fixed #page-footer {
        border-radius: 0;
    }
}
/* End border around non-100%-width layouts */

/*
 * Sticky footer for 100% width fluid layout.
 * Solution from Ryan Fait, http://ryanfait.com/sticky-footer/
 * See HOSSUP-867.
 */
html,
body.layout-fluid-100,
.layout-fluid-100 #page {
    height: 100%;
}

.layout-fluid-100 #page2 {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -128px; /* the bottom margin is the negative value of the footer's height */
}

.layout-fluid-100 #page-footer,
.layout-fluid-100 .push {
    height: 128px; /* .push must be the same height as .footer */
}
/* End Sticky Footer for 100% width fluid layout */

/* Sticky footer workaround for when performance info is displayed on the page */
.layout-fluid-100.debug-performance #page2 {
    margin: 0 auto -1000px; /* the bottom margin is the negative value of the footer's height */
}

.layout-fluid-100.debug-performance #page-footer,
.layout-fluid-100.debug-performance .push {
    height: 1000px; /* .push must be the same height as .footer */
}
/* End sticky footer performance info workaround */

/* Course name width issues on front page */
.coursebox > .info > .name {
    width: auto;
}